import { Collapse, SideBar  } from 'antd-mobile'
import style from './index.module.scss'
import { collapseType, sliderType } from '@/type/category'

const LeftSlider = (props: {leftCollapse: [], sliderIDClick: Function}) => {

  // 点击手风琴的每一项 都让其立即获取到 当前项下 第一个sliderbar的cid
  const collapseClick = (id: number) => {
    props.sliderIDClick(id)
  }

  const getList = () => {
    return props.leftCollapse.map((item: collapseType) => (
       <Collapse.Panel key={item.id} title={item.name} onClick={() => collapseClick(item.children[0].id)}>
          <SideBar>
            {item.children.map((itemB: sliderType) => {
              return <SideBar.Item key={itemB.id} title={<div onClick={() => props.sliderIDClick(itemB.id)}>{itemB.name}</div>}/>
            })}
          </SideBar>
       </Collapse.Panel>
    ))
  }  
  return (
    <div className={style.leftBox}>
       <Collapse accordion={true}>
         {getList()}
       </Collapse>
    </div>
  )
}

export default LeftSlider